<template>
  <div class="service-fav">
    <loading :show="loading" />
    <ul class="list">
      <template v-for="(item, index) in list">
        <li
          class="list-item"
          :key="index"
        >
          <div class="image">
            <img v-lazy="item.user.avatar" v-if="item.user"/>
          </div>
          <div class="desc">
            <p class="title">TOP: {{index + 1}}</p>
            <p class="text" v-if="item.user">ID: {{item.user.id}}</p>
            <p class="text" v-if="item.user">昵称: {{item.user.nickname}}</p>
            <p class="text" v-if="item.user">电话: {{item.user.mobile}}</p>
            <p class="text color">总人数: {{item.c}}</p>
            <p class="text" v-if="item.user">注册时间: {{item.user.create_time}}</p>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'ServiceRank',
  components: {
    Loading
  },
  data() {
    return {
      loading: false,
      list: [],
    }
  },
  methods: {
    getList() {
      this.loading = true
      api.Exec.rankList().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data.list
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.service-fav
  //background red
  .list
    .list-item
      background white
      padding 10px
      border-radius 5px
      margin-bottom 10px
      display flex
      position relative
      min-height 100px
      .image
        width 85px
        padding 5px
      .desc
        flex 1
        text-align left
        padding-left 15px
        .title
          font-weight 700
          font-size 14px
          line-height 18px
          color red
        .text
          font-size 14px
          //font-weight 700
          //color $main_color
          margin-top 5px
          line-height 1.2
          &.color
            color red

</style>
